<template>
  <div>

    <!-- 
      ref属性
        一：被用来给元素或子组件注册引用信息(id的替代者)
        二：应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)
        三：使用方式：
                打标识:<h1 ref="xxx">...</h1>  或 <school ref="xxx"></school>
                获取：this.$refs.xxx
     -->

    <h1 v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点我输出上方的DOM元素</button>
    <School ref="sch"/>
    <Student studentName="徐亚远" sex="男" :age="20"></Student>
    <hr/>
    <SchoolMixin></SchoolMixin>
    <hr/>
    <StudentMixin></StudentMixin>
  </div>
</template>

<script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
import SchoolMixin from './components/SchoolMixin.vue'
import StudentMixin from './components/StudentMixin.vue'
export default {
  name: "App",
  components: {
    School,
    Student,
    SchoolMixin,
    StudentMixin

  },
  data(){
    return {
      msg: '欢迎学习Vue'
    }
  },
  methods: {
    showDom(){
      console.log(this.$refs.title)  // 真实DOM元素
      console.log(this.$refs.btn)   // 真实DOM元素
      console.log(this.$refs.sch) // School组件的实例对象(vc)
    }
  }
};
</script>

<style></style>
